<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" type="text/css" href="./css/baseCss.css">
	<title>首页</title>
	<style type="text/css">
		body{
			min-width: 1200px;
		}
		.centerBg{
			height: 870px;
		}

		.loginDia{
			position: absolute;
			top: 164px;
			right: 450px;
		}
		.loginDia_con{
			background-color: #fff;
			padding: 30px 50px;
			width: 280px;
			color: #999999;
			font-size: 15px;
		}
		.loginDia_conTit{
			color: #3a3a3a;
			font-size: 20px;
			padding-bottom: 8px;
		}
		.loginDia_input{
			border-radius: 5px;
			border: 1px solid #dcdcdc;
			margin-top: 22px;
			height: 44px;
		}
		.loginDia_inputImg{
			display: inline-block;
			padding: 9px 10px 7px 10px;
			position: relative;
		}
		.loginDia_inputImg:before{
			content: "";
			position: absolute;
			right: 0;
			top: 11px;
			height: 20px;
			width: 1px;
			background-color: #dcdcdc;
		}
		.loginDia_inputInc{
			vertical-align: middle;
			display: inline-block;
			margin-top: -15px;
			padding-left: 20px;
			width: 75%;
		}
		.loginDia_inputInc input{
			border: none;
			width: 100%;
			height: 100%;
			outline: none;
		}
		.passInc{
			overflow: auto;
			margin-top: 25px;
			margin-bottom: 20px;
		}
		.remePass{
			float: left;
		}
		.remePass img{
			vertical-align: top;
			margin-top: 3px;
			margin-right: 2px;
		}
		.forgetPass{
			color: #327ac7;
			float: right;
		}
		.buleBtn{
			background-color: #327ac7;
			border-radius: 5px;
			color: #fff;
			width: 100%;
			border: none;
			height: 45px;
		}

		.valiBtn button{
			width: 130px;
		}
		.loginDia_vali .loginDia_inputInc input{
			float: left;
			height: 35px;
			margin-top: 20px;
		}
		.loginDia_vali2 .loginDia_input{
			width: 130px;
			margin: 0;
			float: left;
		}
		.loginDia_valiTit{
			margin: 20px 0;
		}
		.vailBtn{
			margin-top: 20px;
		}
		.loginDia_return{
			text-align: center;
			padding: 10px 0;
		}
	</style>
</head>

<body>
	<div id="example">
		<all-header></all-header>
		<!--<header>-->
			<!--<div class="centerTop">-->
				<!--<div class="centerLogo" onclick="window.location.href='./index.html'"><img src="./img/bigLogo.jpg"></div>-->
				<!--<div class="centerList">-->
					<!--<div onclick="window.location.href='./video.html'">视频课程</div><div>考试中心</div>-->
				<!--</div>-->
				<!--<div class="centerLr">-->
					<!--<div class="centerLr_div" onclick="window.location.href='./login.html'">登录</div>-->
				<!--</div>-->
			<!--</div>-->
		<!--</header>-->
		<section>
			<div class="centerBg">
				<img class="imgBai" src="./img/bg02.jpg">
				<div class="loginDia">
					<div class="loginDia_con" v-if="islogin">
						<div class="loginDia_conTit"><span>登录</span></div>
						<div class="loginDia_input">
							<span class="loginDia_inputImg"><img src="./img/loginlogo01.png"></span>
							<span class="loginDia_inputInc"><input id="mobile" type="text" placeholder="手机/用户名"></span>
						</div>
						<div class="loginDia_input">
							<span class="loginDia_inputImg"><img src="./img/loginlogo02.png"></span>
							<span class="loginDia_inputInc"><input id="password" type="password" placeholder="密码"></span>
						</div>
						<div class="passInc">
							<div class="remePass" @click="isInpassFun"><span><img :src="isInpassword"></span>记住密码</div>
							<div class="forgetPass" @click='loginSw'>忘记密码</div>
						</div>
						<div><button @click="login" class="buleBtn">登录</button></div>
					</div>

					<div class="loginDia_con" v-if="isforget">
						<div class="loginDia_conTit"><span>重设密码</span></div>
						<div class="loginDia_vali">
							<div class="loginDia_valiTit">手机号码:</div>
							<div class="loginDia_input"><span class="loginDia_inputInc"><input type="text"></span></div>
						</div>
						<div class="loginDia_vali loginDia_vali2">
							<div class="loginDia_valiTit">短信验证码:</div>
							<div class="overauto">
								<div class="loginDia_input">
									<span class="loginDia_inputInc"><input type="text"></span>
								</div>
								<div class="valiBtn right"><button class="buleBtn">获取短信验证码</button></div>
							</div>
						</div>
						<div class="vailBtn"><button class="buleBtn">重设密码</button></div>
						<div class="loginDia_return" @click="loginSw">返回</div>
					</div>
				</div>
			</div>
		</section>

		<all-footer></all-footer>
	</div>
</body>

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/httpUnit.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript" src="./component/allFooter.js"></script>
<script type="text/javascript" src="./component/allHeader.js"></script>
<script type="text/javascript">
    loginVue();

    //Vue函数
    function loginVue() {
        var allheader = allHeader();
        var allfooter = allFooter();
        var vm = new Vue({
            el: '#example',
            data: {
                "islogin":true,//是否显示登录窗口
                "isforget":false,//是否显示忘记密码窗口
				"isInpassword":"./img/diaSel02.png"//是否记住密码
			},
            mounted:function () {

            },
            methods:{
                //登录窗口与忘记密码窗口转换
                loginSw:function () {
                    if(this.islogin==true){
                        this.islogin=false;
                        this.isforget = true;
					}else if(this.islogin==false){
                        this.islogin=true;
                        this.isforget = false;
					}
                },
				//检测是否记住密码
				isInpassFun:function(){
					if(this.isInpassword=="./img/diaSel02.png"){
					    this.isInpassword = "./img/diaSel01.png";
					}else if(this.isInpassword=="./img/diaSel01.png"){
                        this.isInpassword = "./img/diaSel02.png";
					}
				},
				//学生登录功能
                login:function () {
                    var mobile = $("#mobile").val();
					var password = $("#password").val();
					if(mobile==""){
					    alert("请输入手机/用户名");
					}else if(password==""){
                        alert("请输入密码");
					}else if(password.length<6){
					    alert("密码不能少于6位数");
					}else{
						window.location.href="./index.html";
                        // var obj = JSON.stringify({
                        //     "mobile": mobile,
                        //     "password": password
                        // });
                        // httpHelperpost("/api/students/login", obj, function(isSuccess, data) {
                        //     if (isSuccess == true) {
                        //         var response = data.responseText;
                        //         var value = JSON.parse(response);

                        //         console.log(response);

                        //         if(value.code == 0){
                        //             console.log("登录成功");
                        //             sessionStorage.setItem("loginInfo",JSON.stringify(value.data));
                        //             window.location.href='./index.html';
                        //         }else if(value.code==401){
                        //             alert(value.message);
                        //             window.location.href='./login.html';
                        //         }else{
                        //             alert(value.message);
                        //             console.log("登录失败");
                        //         }
                        //     }else {}
                        // });
					}
                }
            },
            components: {
                'all-header': allheader,
                'all-footer': allfooter
            }
        })
    }
</script>

</html>